Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Tabs
We can add tabs into our Vue app with Quasar’s q-tab component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-tabs
v-model="tab"
inline-label
class="bg-purple text-white shadow-2"
>
<q-tab name="mails" icon="mail" label="Mails"></q-tab>
<q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>
<q-tab name="movies" icon="movie" label="Movies"></q-tab>
</q-tabs>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
We add the q-tabs component as a wrapper.
And we add the q-tab component to add the tabs.
icon has the icon name. And label has the label text.
The name value is set as the value of the tab reactive property when we click on a tab.
The inline-label prop lets us make the label text display to the right of the icon.
Tab Arrows
Arrows will display when the tabs overflow the container.
We can set it to display outside the tab content with the outside-arrow prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-tabs
v-model="tab"
inline-label
outside-arrows
mobile-arrows
class="bg-purple text-white shadow-2"
>
<q-tab name="mails" icon="mail" label="Mails"></q-tab>
<q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>
<q-tab name="movies" icon="movie" label="Movies"></q-tab>
</q-tabs>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
Vertical Tabs
We can add the verttical prop to set the tabs to display vertically:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-tabs v-model="tab" vertical class="bg-purple text-white shadow-2">
<q-tab name="mails" icon="mail" label="Mails"></q-tab>
<q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>
<q-tab name="movies" icon="movie" label="Movies"></q-tab>
</q-tabs>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
Tab Color
We can set the color of the tab content individually with their own classes:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout view="lHh Lpr lFf" container style="height: 100vh;">
<div class="q-pa-md">
<q-tabs v-model="tab">
<q-tab
class="text-purple"
name="mails"
icon="mail"
label="Mails"
></q-tab>
<q-tab
class="text-orange"
name="alarms"
icon="alarm"
label="Alarms"
></q-tab>
<q-tab
class="text-teal"
name="movies"
icon="movie"
label="Movies"
></q-tab>
</q-tabs>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
tab: undefined
}
});
</script>
</body>
</html>
We add our own class to each q-tab .
Conclusion
We can add tabs into our Vue app with Quasar’s q-tabs and q-tab components.
